/**
 * Chargement des données JSON pour l'affichage du graphe Highcharts quota.
 */
function loadGraphQuota(nivGeog, geog, idGeog) {
	
	var quota = "";
	if ($('#quotaRadioMarcheId').get(0).checked) {
		quota = "QM";
	} else if ($('#quotaRadioProduitId').get(0).checked) {
		quota = "QP";
	}
	
	var product		= $('#productId').get(0).value;
	var source 		= $('#sourceId').get(0).value;
	var periode 	= $('#periodId').get(0).value;
	var unite 		= $('#unitId').get(0).value; 
	
	$.ajax({
 		traditional: true, 
 		type: 'POST', 
 		url: './dataQuota.do',
 		target: "_blank", 
 		data : {
 			nivGeog: 	nivGeog,
			geog: 		geog,
			source: 	source,
			product: 	product,
			idGeog: 	idGeog,
			periode: 	periode,
			unite:		unite,
			quota:		quota,
			statutProduit: statutProduit
 		},
 		error: function () {},
 		success: function(result) { 
 			displayGraphQuota(result, nivGeog, geog); 
 		}
 	}); 
}

/**
 * Affichage du graphe Highcharts quota.
 */
function displayGraphQuota(json, nivGeog, geog) {
	
	// Couleur DeltaPM 
	var colorDeltaPM = '#006400';
	// Couleur PM 
	var colorQuota = '#00008B';
	
	/****************/
	/**** Series ****/
	/****************/
	var allSeries = [];
	var quotaSerie = new Object();
	quotaSerie.name = 'Quota';
	quotaSerie.cursor = 'pointer';
	quotaSerie.type = 'column';
	quotaSerie.color = colorDeltaPM;
	quotaSerie.yAxis = 1;
	quotaSerie.data = json.data1;
	quotaSerie.tooltip = new Object();
	quotaSerie.tooltip.valueSuffix = ' %';
	quotaSerie.tooltip.hideDelay = 10;
	allSeries.push(quotaSerie);
	if (statutProduit == 'complet' || statutProduit == 'pasDeMarche') {
		var otherSerie = new Object();
		if (statutProduit == 'complet') {
			otherSerie.name = '&Delta;Pm (pt)';
		} else if (statutProduit == 'pasDeMarche') {
			otherSerie.name = 'EVOL VOL (%)';
		}
		otherSerie.color = colorDeltaPM;
		otherSerie.type = 'spline';
		otherSerie.data = json.data2;
		otherSerie.lineWidth = 0;
		otherSerie.tooltip = new Object();
		if (statutProduit == 'complet') {
			otherSerie.tooltip.valueSuffix = ' pt'; 
		} else if (statutProduit == 'pasDeMarche') {
			otherSerie.tooltip.valueSuffix = ' %'; 
		}
		otherSerie.tooltip.hideDelay = 10;
		otherSerie.dataLabels = new Object();
		otherSerie.dataLabels.enabled = true;
		otherSerie.dataLabels.useHTML = true;
		otherSerie.dataLabels.backgroundColor = 'rgba(176,196,222, 0.8)'; 
		otherSerie.dataLabels.borderRadius = 3;
		otherSerie.dataLabels.borderWidth = 1;
		otherSerie.dataLabels.borderColor = '#AAA';
		otherSerie.dataLabels.y = -2;
		otherSerie.dataLabels.formatter = function () {
			if (statutProduit == 'complet') {
				return '<span style="color:' + colorDeltaPM + ';font-size:9px;">&Delta;PM ' + this.y + '</span>'; 
			} else if (statutProduit == 'pasDeMarche') {
				return '<span style="color:' + colorDeltaPM + ';font-size:9px;">Evol ' + this.y + '</span>'; 
			}
        };
		allSeries.push(otherSerie);
	}
	
	var clickDetected = false;
	
	$("#graphQuota").empty();
	
	var minJsonData1 = 1000000;
	
	var maxJsonData1 = -10000;
	
	for (val in json.data1) {
		minJsonData1 = Math.min(json.data1[val].y, minJsonData1);
		maxJsonData1 = Math.max(json.data1[val].y, maxJsonData1);
	}
	
	minJsonData1 -= 2;
	
	maxJsonData1 += 3;
	
	var minJsonData2 = 1000000;
	
	var maxJsonData2 = -10000;
	
	for (val in json.data2) {
		minJsonData2 = Math.min(json.data2[val], minJsonData2);
		maxJsonData2 = Math.max(json.data2[val], maxJsonData2);
	}
	
	minJsonData2 = minJsonData2 * 1.05;
	
	var scroll;
	
	var max;
	
	if ((json.nbData-1) <= 7) {
		max = json.nbData -1; 
		scroll = false;
	} else {
		max = 7;
	 	scroll = true;
	}
	
	// Affichage du titre du graphe
	var title = "";
	var subtitle = "";
	if ($('#quotaRadioMarcheId').get(0).checked) {
		title = "Quota Marche : " + lib_marche;
		subtitle = $('#productId').get(0).options[$('#productId').get(0).selectedIndex].text + " - " + $('#periodId').get(0).options[$('#periodId').get(0).selectedIndex].text;
	} else if ($('#quotaRadioProduitId').get(0).checked) {
		title = "Quota Produit : " + $('#productId').get(0).options[$('#productId').get(0).selectedIndex].text;
		subtitle = $('#periodId').get(0).options[$('#periodId').get(0).selectedIndex].text;
	}
	
	/***************/
	/**** YAxis ****/
	/***************/
	var allYAxis = [];
	var secondYAxis = new Object();
	secondYAxis.gridLineDashStyle = 'dot';
	secondYAxis.labels = new Object();
	secondYAxis.labels.format = '{value} ';
	if (statutProduit == 'complet') {
		secondYAxis.labels.format = '{value} pt';
	} else if (statutProduit == 'pasDeMarche') {
		secondYAxis.labels.format = '{value} %';
	}
	secondYAxis.labels.style = new Object();
	secondYAxis.labels.style.color = colorDeltaPM;
	secondYAxis.labels.style.fontSize = '9px';
	secondYAxis.labels.style.fontFamily = 'Arial';
	secondYAxis.title = new Object();
	if (statutProduit == 'complet') {
		secondYAxis.title.text = '<span style="font-size:11px;font-family:Arial;font-weight:normal;">&Delta;PM (pt)</span>';
	} else if (statutProduit == 'pasDeMarche') {
		secondYAxis.title.text = '<span style="font-size:11px;font-family:Arial;font-weight:normal;">EVOL VOL (%)</span>';
	} else {
		secondYAxis.title.text = '';
	}
	secondYAxis.title.useHTML = true;
	secondYAxis.title.style = new Object();
	secondYAxis.title.style.color = colorDeltaPM;
	secondYAxis.min = minJsonData2;
	secondYAxis.max = maxJsonData2;
	secondYAxis.maxPadding = 0.01;
	secondYAxis.endOnTick = false; // axes non liés
	secondYAxis.opposite = true;
	allYAxis.push(secondYAxis);
	var firstYAxis = new Object();
	firstYAxis.labels = new Object();
	firstYAxis.labels.format = '{value} %';
	firstYAxis.labels.style = new Object();
	firstYAxis.labels.style.color = colorQuota;
	firstYAxis.labels.style.fontSize = '9px';
	firstYAxis.labels.style.fontFamily = 'Arial';
	firstYAxis.title = new Object();
	firstYAxis.title.text = '<span style="font-size:11px;font-family:Arial;font-weight:normal;">Quota</span>';
	firstYAxis.title.useHTML = true;
	firstYAxis.title.style = new Object();
	firstYAxis.title.style.color = colorQuota;
	firstYAxis.min = minJsonData1;
	firstYAxis.max = maxJsonData1;
	firstYAxis.maxPadding = 1;
	firstYAxis.endOnTick = false;
	firstYAxis.gridLineDashStyle = 'dot';
	firstYAxis.gridLineWidth = 0;
	allYAxis.push(firstYAxis);
	
	var chart4 = new Highcharts.Chart({
		chart: {
			renderTo: 'graphQuota'
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: true
        },
        title: {
            text: '<span style="font-size:13px;font-family:Arial;">' + title + '</span>',
            useHTML: true
        },
        subtitle: {
            text: '<span style="font-size:11px;font-family:Arial;">' + subtitle + '</span>',
            useHTML: true
        },
        xAxis: {
        	min:0,
        	max:max,
            categories: json.categ,
            labels: {
                rotation: -45, 
                align: 'right', 
                style : {
                	fontSize: '9px',
                	fontFamily: 'Arial'
                }
            }
        },
        scrollbar: {
            enabled:scroll
        },
        rangeSelector: {
            enabled:false
        },
        yAxis: allYAxis,
        tooltip: {
            shared: true,
            hideDelay: 10
        },
        legend: {
        	enabled: false, // desactive la legende 
            layout: 'horizontal',
            align: 'center',
            x: 0,
            verticalAlign: 'bottom',
            y: 0,
            floating: false,
            backgroundColor: '#FFFFFF',
            itemStyle: {
            	fontSize : '10px',
            	fontFamily: 'Arial'
            },
            useHTML: true
        },
        plotOptions: {
            column: {
            	borderRadius: 5,
            	pointWidth: 20,
            	pointPadding: 0.1,
            	groupPadding: 0.1,
                borderWidth: 0,
                stacking: 'normal',
                point: {
                    events: {
                    	click: function(event) {
                            if (clickDetected) {
                                // Double clic sur le graphe  
                            	if (this.niveau == 'U') {
                            		globalNivGeog = 'UGA';
                            	} else {
                            		globalNivGeog = this.niveau;
                            	}
                            	globalGeog = this.category;
                            	idGeog = this.idGeog;
                            	// Ouverture de l arbre de gauche
          		  				$(this).jstree("open_node", $("#" + idGeog + "-" + globalNivGeog).parent().parent().parent().children("a"));
          		  				$("#" + idGeog + "-" + globalNivGeog).addClass("jstree-clicked");
        	  		  			$("#" + idGeog + "-" + globalNivGeog).click();
                                clickDetected = false;
                            } else {
                                clickDetected = true;
                                setTimeout(function() {
                                    clickDetected = false;
                                }, 500); 
                            }
                        },
        				mouseOver: function() {
        					// Ajout de la transparence lors du survol des bars 
        					if (this.graphic.fill == "rgb(255,25,25)") { // rouge
        						this.graphic.attr('fill', 'rgba(255, 25, 25, 0.5)');
        					} else if (this.graphic.fill == "rgb(25,255,25)") { // vert
        						this.graphic.attr('fill', 'rgba(25, 255, 25, 0.5)');
        					} else if (this.graphic.fill == "rgb(255,239,83)") { // jaune
        						this.graphic.attr('fill', 'rgba(255, 239, 83, 0.5)');
        					}
        				}
                    }
                }
            },
            series: {
                dataLabels: {
                    enabled: true,
                    y:-2, // remonte le label par rapport au point 
                    formatter: function() {
                    	return '';
                    }
                }
            }
        },
        series: allSeries
	});
	 
	// Affichage des valeurs en bas du graphe 
	var bottom = chart4.plotHeight - 20;
	bottomGlobal = bottom;
	$.each(chart4.series[0].data, function(i, data){
        data.dataLabel.attr({
            y: bottom
        });
    });
	
}

